<template>
	<view :style="skin" class="tenantable">
		<block v-if="pageShow">
			<view class="list flex-c-SB" v-for="(item,index) in deviceTypeList" :key="index" @click="changeDeviceType(item)">
				<u--image shape="circle" :src="'https://test24.giraffepowa.com'+item.photo" width="75px" height="75px"></u--image>
				<view class="deviceInfo flex-c-SB-c">
					<view>
						{{item.productModel}}
					</view>
					<view>
						<!-- <text>(可租{{item.tenantable}},预定{{item.reserve}})</text> -->
						<text v-if="item.tenantable">({{$t('lease.tenantable')}}{{item.tenantable}})</text>
						<text v-else>({{$t('lease.tenantable')}}0)</text>
					</view>
				</view>

				<text class="iconfont icon-a-mingchengarrow_right iconRight"></text>
			</view>
		</block>

		<block v-else>
			<view class="infoTitle">
				<view>
					{{actionType.productModel}}
				</view>
				<!-- <view >
					(可租{{actionType.tenantable}},预定{{actionType.reserve}})
				</view> -->
				({{$t('lease.tenantable')}}{{actionType.tenantable}})
				<text class="iconfont icon-a-mingchengarrow_left iconLeft" @click="pageShow = true"></text>
			</view>
			<view class="list flex-c-SB" v-for="(item,index) in deviceList" :key="index">
				<u--image shape="circle" :src="'https://test24.giraffepowa.com'+item.photo" width="75px" height="75px"></u--image>
				<view :class="item.stockStatus == 1?'deviceStatus ':'deviceStatus deviceDislabe'" @click="handleRent(item)">
					<view>
						{{$t('lease.productID')}}:{{item.productId}}
					</view>
					<view>
						{{$t('lease.battery')}}:{{item.battery}}%
					</view>
					<view>
						{{$t('lease.status')}}:{{item.stockStatus == 1?$t('lease.tenantable'):item.stockStatus == 2?$t('lease.reserve'):''}}
					</view>
				</view>

			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getDeviceType
	} from '@/utils/sql/sqlDeviceType.js'
	import {
		getDeviceTypeToId
	} from '@/utils/sql/sqlDevice.js'
	export default {
		props: {
			deviceTypeList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				pageShow: true,
				deviceList: [],

				actionType: {},
			};
		},
		mounted() {

		},
		computed: {
			...mapState({
				skin: state => state.theme.skin,
				selectUser: state => state.home.selectUser,
			})

		},
		methods: {
			changeDeviceType(item) {
				console.log(item);
				if(item.tenantable){
					this.pageShow = false
					this.actionType = item
					this.getDevice(item.productModel,item.photo)
				}else{
					uni.showToast({
						title:'No Device',
						icon:'none'
					})
				}
			
			},
			async getDevice(productModel,photo) {
				let res = await getDeviceTypeToId(productModel)
				console.log(res);
				if (res.code == 0) {

					this.deviceList = res.data.filter(item => {
						return (item.stockStatus == 1 || item.stockStatus == 2)
					})
					this.deviceList.map(item => {
						return item.battery = JSON.parse(item.productProperty).battery,item.photo = photo
					})
				}
			},
			handleRent(item) {
				
				if (item.stockStatus == 2) {
					uni.showToast({
						title: this.$t('lease.ordered'),
						icon: 'none'
					});
					return false
				}
				this.$emit('handleRent', item)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tenantable {
		padding: 16px;
		width: calc(100% - 32px);
		margin: 16px auto;
		box-sizing: border-box;
		overflow-y: auto;
		height: calc(100% - 62px);
		border: 1px solid #ccc;
		overflow-y: auto;

		.infoTitle {
			width: 100%;
			height: 50px;
			border-radius: 4px;
			background-color: #165DFF;
			text-align: center;
			color: #fff;
			margin-bottom: 16px;
			position: relative;

			.iconLeft {
				position: absolute;
				top: 50%;
				left: 16px;
				transform: translate(-50%, -50%);
				color: #fff;
			}
		}

		.list {
			margin-bottom: 16px;
			position: relative;

			.deviceInfo {
				width: 220px;
				height: 49px;
				background-color: #165DFF;
				color: #fff;
				padding: 4px 0;
				box-sizing: border-box;
				border-radius: 4px;
				margin-left: 8px;
			}

			.deviceStatus {
				width: 220px;
				height: 73px;
				color: #fff;
				background-color: #165DFF;
				border-radius: 4px;
				padding: 4px 10px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-left: 8px;
			}

			.deviceDislabe {
				background-color: #BEBEBE;
			}

			.iconRight {
				position: absolute;
				top: 50%;
				right: 0px;
				transform: translate(-50%, -50%);
				color: #fff;
			}
		}
	}
</style>